<!-- 用户管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24">
        <div class="linee">
          <div class="titlel">
            <div class="titlel_box"></div>
            <div class="titlel_tt">详情</div>
          </div>
          <!-- <el-button class="daochubtn">
            <el-icon><Upload /></el-icon>
            <span>导出</span>
          </el-button> -->
        </div>

        <div class="containers">
          <div class="center1">
            <div class="dengjibox">
              <div class="jiname">一级项目:1000经纬</div>
              <div class="jiname" style="margin-left: 198px">二级项目:1001北京经纬</div>
            </div>
            <el-table
              :header-cell-style="tableHeaderStyle"
              :data="tableData"
              style="width: 100%; margin-bottom: 24px"
              :span-method="arraySpanMethod"
              :cell-style="tableHeaderStyle1"
            >
              <el-table-column label="序号" align="center" fixed width="69">
                <template #default="scope">
                  <div
                    style="display: flex; align-items: center; justify-content: center; width: 100%"
                    v-if="scope.$index != 6 && scope.$index != 7"
                  >
                    {{ scope.row.id }}
                  </div>
                  <div
                    style="display: flex; align-items: center; width: 100%"
                    v-if="scope.$index == 6"
                  >
                    {{ scope.row.id }}
                  </div>
                  <div
                    style="display: flex; align-items: center; width: 100%; color: #f53f3f"
                    v-if="scope.$index == 7"
                  >
                    {{ scope.row.id }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="yijiclassname"
                align="center"
                label="一级项目"
                fixed
                width="130"
              />
              <el-table-column align="center" label="二级项目" fixed min-width="130" />
              <el-table-column label="周一" align="center">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center">
                  <template v-slot:header>
                    <span>12</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="周二" align="center">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周三">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周四">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周五">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周六">
                <el-table-column prop="ondeaty" label="1" index="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周日">
                <el-table-column prop="ondeaty" label="1" index="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周一" align="center">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center">
                  <template v-slot:header>
                    <span>1</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="周二" align="center">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周三">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周四">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周五">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周六">
                <el-table-column prop="ondeaty" label="1" index="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周日">
                <el-table-column prop="ondeaty" label="1" index="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周一" align="center">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周二" align="center">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周三">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column label="周四">
                <el-table-column prop="ondeaty" label="1" min-width="58" align="center" />
              </el-table-column>
              <el-table-column
                prop="heji"
                align="center"
                label="合计"
                fixed="right"
                min-width="130"
              />
              <el-table-column label="操作" fixed="right" align="center" width="118">
                <template #default="scope">
                  <div>
                    <span
                      style="font-weight: 400; font-size: 16px; color: #165dff; cursor: pointer"
                      @click="gopage"
                      v-if="scope.$index != 7 && scope.$index != 6"
                    >
                      删除 |
                    </span>

                    <span
                      style="font-weight: 400; font-size: 16px; color: #165dff; cursor: pointer"
                      @click="scope.row.bool = !scope.row.bool"
                      v-if="scope.$index != 7 && scope.$index != 6"
                    >
                      {{ scope.row.bool ? "保存" : "编辑" }}
                    </span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
function tableHeaderStyle({ row, rowIndex, column, columnIndex }) {
  if (column.rowSpan == 1) {
    console.log(column);

    if (column.index == "1") {
      return { background: "#21A193", color: "#fff" };
    }

    if (column.label == "周六" || column.label == "周日")
      return { background: "#21A193", color: "#fff" };
  }
}
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];

const tableData = [
  {
    id: 1,
    yijiclassname: "公共假期",
    ondeaty: 1,
    heji: 8,
  },
  {
    id: 2,
    yijiclassname: "病假",
    ondeaty: 1,
    heji: 8,
  },
  {
    id: 3,
    yijiclassname: "年假",
    ondeaty: 1,
    heji: 8,
  },
  {
    id: 4,
    yijiclassname: "丧假",
    ondeaty: 1,
    heji: 8,
  },
  {
    id: 5,
    yijiclassname: "考试假",
    ondeaty: 1,
    heji: 8,
  },
  {
    id: 6,
    yijiclassname: "额外假期",
    ondeaty: 1,
    heji: 8,
  },
  {
    id: "合计",
    ondeaty: 1,
    heji: 8,
  },
];

const rules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
  roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (rowIndex === 6 || rowIndex === 7) {
    if (columnIndex === 0) {
      return [1, 3];
    } else if (columnIndex === 1) {
      return [0, 0];
    } else if (columnIndex === 2) {
      return [0, 0];
    }
  }
};
function tableHeaderStyle1({ row, rowIndex, column, columnIndex }) {
  if (rowIndex == 7) {
    return { color: "#F53F3F" };
  }
  if (rowIndex == 6) {
    return { color: "#1D2129", "font-weight": "bold" };
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table thead th {
  background: #f2f3f5;
  color: #1d2129;
}
.linee {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titlel {
  width: 100%;
  display: flex;
  align-items: center;
  .titlel_box {
    width: 4px;
    height: 23px;
    background: #003779;
    border-radius: 0px 6px 6px 0px;
  }
  .titlel_tt {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: bold;
    font-size: 1.375rem;
    color: #1d2129;
    margin-left: 9px;
  }
}
.containers {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  border-radius: 16px 16px 16px 16px;
  margin-top: 18px;
  padding: 0 24px;
}
.containers .center1 {
  width: 100%;
}
.dengjibox {
  height: 74px;
  background: #edf1fc;
  border-radius: 12px 12px 12px 12px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.jiname {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: bold;
  font-size: 1.375rem;
  color: #003779;
  margin-left: 24px;
}
.top1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.top1 .leftboxs {
  display: flex;
  align-items: center;
}
.leitem {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #4e5969;
  position: relative;
  margin-right: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.activecolor {
  color: #055fe4 !important;
  font-weight: bold;
}
.activeboder {
  position: absolute;
  width: 56px;
  height: 3px;
  background: #055fe4;
  border-radius: 2px 2px 2px 2px;
  bottom: -10px;
}
.container {
  width: 100%;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
}
.daochubtn {
  width: 112px;
  height: 44px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 15px;
  color: #4e5969;
}
.daochubtn img {
  width: 16px;
  height: 16px;
}
.container .el-button {
  width: 113px;
  height: 44px;
  background: #edf1fc;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #003779;
  margin-left: 20px;
  margin-top: 18px;
}
>>> .el-input__wrapper {
  background: #f7f8fa;
  box-shadow: none !important;
}
.borderline {
  width: 19px;
  height: 1px;
  background: #86909c;
  border-radius: 1px 1px 1px 1px;
}
>>> .el-date-editor.el-input {
  width: 156px;
  height: 44px;
  background: #f7f8fa;
  border-radius: 6px 6px 6px 6px;
}
.timebox {
  display: flex;
  align-items: center;
  margin-left: 22px;
  width: 361px;
  justify-content: space-between;
}
.el-select {
  width: 299px;
  border-radius: 6px 6px 6px 6px;
  margin-left: 20px;
  display: flex;
  align-items: center;
}
>>> .el-select--large .el-select__wrapper {
  width: 299px;
  height: 44px;
  background: #f7f8fa;
  border-radius: 6px 6px 6px 6px;
  border: none !important;
  box-shadow: none;
}
.el-table {
  margin-top: 35px;
}
</style>
